<template>
    <template v-for="(cmpnt) in cmpnts" :key="cmpnt.id" v-if="cmpnts && cmpnts.length > 0">
        <div :class="[{ 'w-100': fullRow || !_.includes(['widgets'], cmpnt.category) }, cmpnt.category]"
            class="move d-inline-block">
            <div v-if="$data.store.conf.editable && !cmpnt.viewable" class=" editable  d-inline-block position-relative"
                :class="[{ active: cmpnt.id == $data.store.conf.selected?.id }, { 'w-100': fullRow || !_.includes(['widgets', 'bars'], cmpnt.category) }]"
                @click:stop="$data.func.activate(cmpnt)">
                <cmpnt-render :cmpnt="cmpnt" :data="data" :parent="parent" />

                <span class="bar position-absolute " :class="{
                    'start-0 top-0 my-1': isPage(cmpnt),
                    'start-50 top-0 my-1 mx-3 bg-success': isContainer(cmpnt),
                    'top-0 end-0 bg-danger': isWidget(cmpnt) || isBars(cmpnt)
                }">
                    <x-property @click="$data.func.activate(cmpnt)" :cmpnt="cmpnt" :bizData="getData(cmpnt)">
                        <span class=" d-flex align-items-center justify-content-center">
                            <i class="iconfont te-i-ui-r fs-5 text-white" :title="cmpnt.ctl.text"></i>
                        </span>
                    </x-property>
                </span>
            </div> 
            <div v-else class="d-inline-block viewable w-100">
                <cmpnt-render :cmpnt="cmpnt" :data="data" :parent="parent" />
            </div>
        </div>
    </template>

</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import cmpntRender from './cmpntRender.vue';
import $data from "xcore/data"
import { ICmpnt, isContainer, isPage, isWidget, isBars } from "xcore/cmpnt"
import _ from 'lodash';
interface Props {
    cmpnts: any[];
    parent?: any;
    data?: any;
    fullRow?: boolean;
}


const props = defineProps<Props>();

const getData = (c: any) => {
    let cmpnt = c as ICmpnt;
    let key = cmpnt.valueKey
    if (props.data && key && !props.data[key]
        && !isWidget(cmpnt) && !isBars(cmpnt)) {
        props.data[key] = {}
        return props.data[key]
    }
    return props.data
}


</script>
<style scoped>
.editable {
    background: var(--xcode-editable-background);
}


.bar {
    font-size: 0.75rem;
    color: var(--mui-menu-color);
    background-color: var(--mui-menu-bgcolor);
    border-radius: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 8;

}

.editable:hover .bar {
    opacity: 1;

}
</style>
